<template>
  <div>
    <site-nav />
    <head-item />
    <DealSnapshoot
      :detail-hint="detailHint"
      :title="title"
      :login-dialog="loginDialog"
      :detail-dialog="detailDialog"
      :quantity-input="quantityInput"
      @openLogin="openLogin"
      @openDetail="openDetail"
      @openPurchase="openPurchase"
      @openBuy="openBuy"
      @quantityCertain="quantityCertain"
      @quantityCall="quantityCall"
      @handleClose="handleClose"
      @toPassword="toPassword"
      @toRegister="toRegister"
    />
    <ProductDet />
    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
  </div>

</template>

<script>
import ProductDet from '../detail/component/ProductDetail'
import DealSnapshoot from './component/DealSnapshoot'
import SiteNav from '../../layout/Nav'
import AdvantageItem from '../../layout/Advantage'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
import FooterItem from '../../layout/Footer'
import HeadItem from '../home/component/Head.vue'
export default {
  name: 'Detail',
  components: {
    ProductDet,
    DealSnapshoot,
    SiteNav,
    AdvantageItem,
    GuideItem,
    FriendlyLink,
    FooterItem,
    HeadItem
  },
  data() {
    return {
      num1: 1,
      quantityInput: false,
      title: '',
      range: '',
      detailDialog: false,
      loginDialog: false,
      detailHint: false
    }
  },
  methods: {
    // 没有登录的情况下弹出的的登录框
    openLogin() {
      this.loginDialog = true
    },
    toRegister() {
      this.$router.push({
        path: '/registered-page'
      })
    },
    toPassword() {
      this.$router.push({
        path: '/password-page'
      })
    },
    // /password-page
    openPurchase() {
      this.title = '采购数量'
      this.quantityInput = true
    },
    quantityCertain() {
      this.quantityInput = false
    },
    quantityCall() {
      this.quantityInput = false
    },
    openDetail() {
      this.title = '联系方式'
      this.detailDialog = true
    },
    openBuy() {
      this.title = '立即购买'
      this.detailHint = true
    },
    // 右上角关闭按钮
    handleClose() {
      this.quantityInput = false
      this.detailDialog = false
      this.loginDialog = false
      this.detailHint = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
